<script setup lang="ts">
import { useRouter } from "vue-router";
import { reactive, ref, watch, computed } from 'vue'

const router = useRouter();



const switch1 = (id: number) => {
  let list = ['','/', '/find', '/friends', '/me']
  router.push(list[id]);
  console.log(id);
  
};


const tabbar = ref([
  {
    id: 1,
    iconfont: '',
    text: '消息'
  },
  {
    id: 2,
    iconfont: '',
    text: '通讯录'
  },
  {
    id: 3,
    iconfont: '',
    text: '发现'
  },
  {
    id: 4,
    iconfont: '',
    text: '我'
  }
])



</script>
<template>
  <div class="FooterTab">
    <div class="item" v-for="item in tabbar" :key="item.id" @click="switch1(item.id)">
      <span class="iconfont">{{ item.iconfont }}</span>
      <span class="text">{{ item.text }}</span>
    </div>
    <!-- <div class="item">
      <span class="iconfont">&#xebc9;</span>
      <span class="text">消息</span>
    </div>
    <div class="item">
      <span class="iconfont">&#xe655;</span>
      <span class="text">通讯录</span>
    </div>
    <div class="item">
      <span class="iconfont">&#xe8af;</span>
      <span class="text">发现</span>
    </div>

    <div class="item">
      <span class="iconfont">&#xe613;</span>
      <span class="text">我</span>
    </div> -->


  </div>
</template>



<style scoped lang="scss">
.FooterTab {
  width: 100%;
  height: 10vh;
  background: #fff;
  border-top: 0.005rem solid #ccc;
  position: fixed;
  bottom: 0;
  display: flex;

  .item {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 25%;
    padding: 0.1rem;

    .iconfont {
      font-size: 1.5rem;
    }

    .text {
      font-size: 1rem;
    }
  }

  .item:hover span {
    color: #07c160;
  }
}
</style>